<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:h="http://java.sun.com/jsf/html"  
	  xmlns:f="http://java.sun.com/jsf/core"
	  xmlns:ui="http://java.sun.com/jsf/facelets"
	  xmlns:p="http://primefaces.org/ui">
	  
	<ui:composition template="../template/template.xhtml">
		<ui:define name="body">
			<h2>#{msg['lista-de-produtos']}</h2>
			
			<h:form id="formProdutos">
				<p:growl autoUpdate="true" />
				
				<div>
			        <table class="lista-conteudo" style="width: 100%; margin-top: 10px;">
			        	<tr>
			        		<td class="coluna" style="width: 20%;">
			        			<p:graphicImage value="/resources/img/panasonic_neo_hi-top_c4.jpg" width="200px" height="150px"/>
			        		</td>
			        		
			        		<td class="coluna" style="width: 55%; text-align: left;">
			        			<h:outputText value="Pilha Panasonic" styleClass="titulo-produto"/>
			        			<span class="resumo-produto">
			        				<h:outputText value="Descrição: Pacote com 4 pilhas Panasonic tamanho AAA." escape="false" />
			        			</span>
			        		</td>
			        		
			        		<td class="coluna" style="width: 25%; text-align: center;">
			        			<h:outputText value="R$ 4,99" />
			        			<br/>
			        			
			        			<p:commandButton icon="ui-icon-cart" value="#{msg['adicionar-produto']}" style="margin-top: 15px;" />
			        		</td>
			        	</tr>
			        </table>
				</div>	 	
				 	
			</h:form>
		</ui:define>
	</ui:composition>
</html>